<template>
	<view class="c-select" :style="{ width }" :class="ggclass">
		<view class="title-box" @click="fole" :style="{ height, border, padding, display }">
			<slot :row="row">
				<text :class="nameClass">{{ name || hint }}</text>
				<text :style="{ transform: `rotate(${show ? 180 : 0}deg)` }"
					class="iconfont icon-xiajiantou icon"></text>
			</slot>
		</view>
		<view class="mask" v-if="isFold" @click="fole"></view>
		<view class="select" ref="content" :class="{ boxShadow: isFold }"
			:style="{ visibility: show ? '' : 'hidden', height: heights === 'auto' ? '' : heights + 'px', width: selectWidth, left, right,background:computedBackground }">
			<view v-for="(v, i) in list" :key="i" @click="confirm(v)">
				<i class="iconfont item-icon" :class="v.icon"></i>
				{{ v.name }}
			</view>
		</view>
	</view>
</template>

<script>
	import propsMixin from '../mixins/props/index.js'
	export default {
		name: "c-select",
		mixins: [propsMixin],
		props: {
			style: {
				type: Object,
				default: () => {
					return {};
				},
			},
			nameClass: {
				type: String,
				default: "",
			},
			isPop: {
				type: Boolean,
				default: false,
			},
			width: {
				type: String,
				default: "",
			},
			height: {
				type: String,
				default: "32rpx",
			},
			selectWidth: {
				type: String,
				default: "",
			},
			right: {
				type: String,
				default: "",
			},
			left: {
				type: String,
				default: "",
			},
			border: {
				type: String,
				default: "",
			},
			padding: {
				type: String,
				default: "",
			},
			value: {
				type: [String, Number],
				default: 0,
			},
			list: {
				type: Array,
				default: () => [],
			},
			range_key: {
				type: String,
				default: "name",
			},
			range_value: {
				type: String,
				default: "id",
			},
			immediate: {
				type: Boolean,
				default: false,
			},
			display: {
				type: String,
				default: "inline-flex",
			},
			hint: {
				type: String,
				default: "请选择",
			},
		},
		data() {
			return {
				name: "",
				num: 0,
				oldHeight: 0,
				isFold: false,
				heights: "auto",
				row: {},
				show: false,
			};
		},
		async mounted() {
			let obj = await this.$getNode(".select", this);
			this.oldHeight = obj.height
			this.heights = 0;
			if (this.immediate) {
				let ov = this.list.findIndex((v) => v[this.range_value] == this.value);
				this.isFold = true;
				this.confirm({
					id: ov > 0 ? ov : 0,
				});
			}
		},
		watch: {
			value: {
				handler(n) {
					if (!n) return;
					let obj = this.list.find((v) => v[this.range_value] == n) || {};
					this.name = obj[this.range_key]
				},
				immediate: true,
			},
		},
		methods: {
			fole() {
				if (this.isPop) return this.$emit("click");
				this.isFold = !this.isFold;
				if (this.isFold) {
					this.show = true;
					this.heights = JSON.parse(JSON.stringify(this.oldHeight));
				} else {
					this.heights = 0;
					this.show = false;
				}
			},
			confirm(v) {
				let index = this.list.findIndex((y) => y.id == v.id);
				let label = this.list[index > 0 ? index : 0][this.range_key];
				let value = this.list[index > 0 ? index : 0][this.range_value];
				this.name = label;
				this.row = {
					name: label,
					id: value,
				};
				this.$emit("input", value);
				this.$emit("change", value);
				this.fole();
			},
		},
	};
</script>

<style lang="less" scoped>
	.item-icon {
		margin-right: 10rpx;
	}

	.icon {
		transition: all 0.2s;
	}

	.boxShadow {
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.16);
	}

	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 10;
	}

	.c-select {
		// flex: 1;
		width: 100%;
		position: relative;
		display: inline-block;
		user-select: none;

		.title-box {
			width: 100%;
			// flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			border-radius: 4rpx;
			font-size: 40rpx;

			.icon-xiala {
				margin-left: 10rpx;
			}
		}

		.select {
			max-height: 200rpx;
			position: absolute;
			top: 60rpx;
			right: 0;
			left: 0;
			border-radius: 20rpx;
			background-color: #fff;
			z-index: 1000;
			overflow: auto;
			transition: all 0.2s;

			&>view {
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				cursor: pointer;
				border-bottom: #f5f5f5 solid 1rpx;
				// color: #333333;
			}

			// &>view:hover {
			// 	background-color: #f5f5f5;
			// 	color: #333;
			// }
		}
	}
</style>
